<template>
	<view class="section section-detail">
		<view class="product_info_content">
			<view class="topic-header el-flex">
				<view class="topic-title text-ellipsis">
					{{product_info_content.title}}
				</view>
				<view class="topic-more">
					<image src="../../static/images/right.png" mode=""></image>
				</view>
			</view>
			<view class="topic-body ">
				<u-scroll-list>
					<view v-for="(item, index) in product_info_content.items" :key="index" class="topic-item">
						<view class="article-imgs">
							<view class="img-box">
								<image :src="item.img_url_list[0]" mode="" class="blur-bg"></image>
								<image :src="item.img_url_list[0]" mode="widthFix" class="real-img"></image>
							</view>
						</view>
						<view class="article-text text-ellipsis">
							{{item.name}}
						</view>
						<view class="article-addition el-flex">
							<view class="article-author el-flex">
								<view class="article-author-avatar ">
									<image :src="item.icon" mode=""></image>
								</view>
								<view class="text text-ellipsis">
									{{item.nickname}}
								</view>
							</view>
							<view class="article-info ">
								<view class="article-nums view-num">
									{{item.view_num}}
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "remark",
		props: ['product_info_content'],
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.section-detail {
		view {
			line-height: 1.15;
		}

		.product_info_content {
			padding: 0 0.16rem 0.4rem;
			text-align: left;

			.topic-header {
				height: 0.98rem;
				font-size: .32rem;
				padding: 0 0.16rem;
				justify-content: space-between;

				.topic-title {
					width: 100%;
					font-size: .32rem;
				}

				.topic-more {
					width: 0.36rem;
					height: 0.36rem;

					image {
						width: 0.36rem;
						height: 0.36rem;
					}
				}
			}

			.topic-body {
				overflow-x: auto;

				.topic-item {
					flex-shrink: 0;
					width: 2.72rem;
					margin: 0 0.16rem 0 0;
					display: block;
					border-radius: 0.16rem;
					overflow: hidden;

					&:first-child {
						margin-right: 0.16rem;
					}

					.article-imgs {
						position: relative;

						.img-box {
							margin: 0;
							height: 2.72rem;
							border-radius: 0;
							width: 100%;
							overflow: hidden;
							position: relative;

							image {
								display: block;
								width: 100%;
								height: 100%;
								object-position: center center;

							}

							.blur-bg {
								object-fit: cover;
								filter: blur(10px);
							}

							.real-img {
								position: absolute;
								z-index: 1;
								top: 50%;
								bottom: 0;
								left: 0;
								right: 0;
								transform: translate(0, -50%);
								border-top-left-radius: 0.16rem;
								border-top-right-radius: 0.16rem;
							}
						}
					}

					.article-text {
						padding: 0 0.16rem;
						font-size: .24rem;
						margin: 0.2rem 0 0;
					}

					.article-addition {
						padding: 0 0.16rem;
						height: 0.84rem;
						font-size: .2rem;
						color: rgba(0, 0, 0, .5);
						justify-content: space-between;

						.article-author {
							width: 50%;

							.article-author-avatar {
								flex-shrink: 0;
								width: 0.36rem;
								height: 0.36rem;
								border-radius: 50%;
								overflow: hidden;
								margin-right: 0.1rem;

								image {
									display: block;
									width: 100%;
									height: 100%;
								}
							}

							.text {
								font-size: .2rem;
								color: rgba(0, 0, 0, .5);
							}
						}

						.article-info {
							.article-nums {
								background-image: url('../../static/images/icon-view.png');
								height: 0.36rem;
								line-height: .36rem;
								padding-left: 0.4rem;
								margin-left: 0.24rem;
								background-color: transparent;
								background-repeat: no-repeat;
								background-position: 0;
								background-size: 0.36rem 0.36rem;
								font-size: .2rem;
								color: rgba(0, 0, 0, .5);

								&:first-child {
									margin-left: 0;
								}
							}
						}
					}
				}
			}
		}
	}
</style>